<!-- eslint-disable vue/multi-word-component-names -->
<!-- eslint-disable vue/no-mutating-props -->
<template>
    <el-form size="small" label-width="66px" label-position="left" label-suffix=" :" style="width: 180px;">
        <el-form-item label="表维数">
            <el-input v-model="data.NumberOfTableDimensions"></el-input>
        </el-form-item>
    </el-form>
    <el-form v-bind="config.dataSet || { inline: true }" size="small" label-width="66px" label-position="left"
        label-suffix=" :">
        <el-form-item label="数据设定" style="width: 180px;">
            <el-select v-model="config.dataSet" style="width: 180px;">
                <el-option label="表和断点" :value="true" />
                <el-option label="查找表对象" :value="false" />
            </el-select>
        </el-form-item>
        <el-form-item v-if="!config.dataSet" label="名称">
            <el-input></el-input>
        </el-form-item>
    </el-form>
    <el-form size="small" label-position="left" label-suffix=" :">
        <div v-show="config.dataSet">
            <el-form-item label="断点设定" label-width="66px" style="width: 180px;">
                <el-select v-model="config.breakPointSet" @change="change">
                    <el-option label="显式值" :value="true" />
                    <el-option label="等间距" :value="false" />
                </el-select>
            </el-form-item>
            <el-descriptions size="small" :column="2" direction="vertical" class="gapDescriptions">
                <el-descriptions-item label="源" label-align="center" width="150">
                    <el-form-item label="X_VEC" label-width="66px">
                        <el-select v-model="config.arr[0].source">
                            <el-option label="对话框" :value="false" />
                            <el-option label="输入端口" :value="true" />
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item label="值">
                    <el-form-item>
                        <el-input v-model="data.X_VEC" :disabled="config.arr[0].source"></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions size="small" :column="2" direction="vertical" class="gapDescriptions">
                <el-descriptions-item width="150">
                    <el-form-item label="Y_VEC" label-width="66px">
                        <el-select v-model="config.arr[0].source">
                            <el-option label="对话框" :value="false" />
                            <el-option label="输入端口" :value="true" />
                        </el-select>
                    </el-form-item>
                </el-descriptions-item>
                <el-descriptions-item>
                    <el-form-item>
                        <el-input v-model="data.Y_VEC" :disabled="config.arr[0].source"></el-input>
                    </el-form-item>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions size="small" :column="config.breakPointSet ? 2 : 3" direction="vertical"
                class="gapDescriptions">
                <template v-for="im, ix in config.arr" :key="ix">
                    <template v-if="ix == 4">
                        <el-descriptions-item label-align="center" width="150">
                            <el-form-item :label="`断点4`" label-width="66px">
                                <template v-if="config.breakPointSet">
                                    <el-input v-model="im.value"></el-input>
                                </template>
                            </el-form-item>
                        </el-descriptions-item>
                        <template v-if="!config.breakPointSet">
                            <el-descriptions-item :label="ix == 1 && !config.breakPointSet ? '间距' : ''">
                                <el-form-item>
                                    <el-input v-model="im.value" :disabled="im.source"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                            <el-descriptions-item :label="ix == 1 && !config.breakPointSet ? '间距' : ''">
                                <el-form-item>
                                    <el-input v-model="im.value2" :disabled="im.source"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                        </template>
                    </template>
                    <template v-if="0 < ix && ix < 4">
                        <el-descriptions-item label-align="center" width="150">
                            <el-form-item :label="ix > 0 ? `断点${ix}` : '表数据'" label-width="66px">
                                <el-select v-if="config.breakPointSet" v-model="im.source">
                                    <el-option label="对话框" :value="false" />
                                    <el-option label="输入端口" :value="true" />
                                </el-select>
                            </el-form-item>
                        </el-descriptions-item>
                        <el-descriptions-item :label="ix == 1 && !config.breakPointSet ? '第一个点' : ''">
                            <el-form-item>
                                <el-input v-model="im.value" :disabled="im.source"></el-input>
                            </el-form-item>
                        </el-descriptions-item>
                        <template v-if="!config.breakPointSet">
                            <el-descriptions-item :label="ix == 1 && !config.breakPointSet ? '间距' : ''">
                                <el-form-item>
                                    <el-input v-model="im.value2" :disabled="im.source"></el-input>
                                </el-form-item>
                            </el-descriptions-item>
                        </template>
                    </template>
                </template>
            </el-descriptions>
        </div>
        <!-- <el-form-item v-if="!config.arr.some(i => i.source == true) || !config.dataSet">
            <el-button>编辑表和断点...</el-button>
        </el-form-item> -->
    </el-form>
</template>

<script setup>
import { onUnmounted, watch } from 'vue';

const { data, config } = defineProps(['data', 'config'])

function change(e) {
    let arr1 = [
        { source: false, value: '[-5:5]' },
        { source: false, value: '[10,22,31]' },
        { source: false, value: '[1:3]' },
        { value: '[1:3]' }
    ]
    let arr2 = [
        { value: '1', value2: '1' },
        { value: '1', value2: '1' },
        { value: '1', value2: '1' },
        { value: '1', value2: '1' }
    ]
    if (e) {
        config.arr = [config.arr[0], ...arr1]
    } else {
        config.arr = [config.arr[0], ...arr2]
    }
}
watch(() => config.dimension, (i, j) => {
    let arr = [
        { source: false, value: 'tanh([-5:5])' },
        { source: false, value: '[-5:5]' },
        { source: false, value: '[10,22,31]' },
        { source: false, value: '[1:3]' },
        { value: '[1:3]' }
    ]
    let _arr = [...config.arr, ...arr.slice(j + 1, i + 1)]
    if (j > i) _arr = config.arr.slice(0, i + 1);
    config.arr = _arr
})
watch(() => config.arr, () => {
    let _arr = [
        { label: '区间比', mode: '继承' },
        { label: '中间结果', mode: '继承' },
        { label: '输出', mode: '继承' },
    ]
    config.dataType = [...config.arr.map((e, i) => ({ label: i == 0 ? '表数据' : '', mode: '继承' })), ..._arr]
    console.log(config.dataType);
})
</script>


<style scoped></style>